<template>
  <default
    v-if="!format || format=='default'"
    :title="title"
    :description="description"
    :thumb="thumb"
    :border="border"
  />
  <banner
    v-else-if="format=='banner'"
    :title="title"
    :description="description"
    :thumb="thumb"
    :border="border"
  />
  <fence
    v-else-if="format=='fence'"
    :title="title"
    :description="description"
    :medias="thumb"
    :border="border"
  />
  <grid
    v-else-if="format=='grid'"
    :title="title"
    :description="description"
    :medias="thumb"
    :border="border"
  />
</template>

<script>
import Default from './default'
import Banner from './banner'
import Fence from './fence'
import Grid from './grid'

export default {
  components: {
    Default,
    Banner,
    Fence,
    Grid
  },
  props: {
    format: {
      type: String,
      default: 'default'
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    medias: {
      type: Array,
      default: []
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    thumb () {
      if (this.format === 'fence') {
        return this.medias.slice(0, 3)
      }
      if (this.format === 'grid') {
        return this.medias.slice(0, 9)
      }
      return this.medias.length ? this.medias.shift() : null
    }
  }
}
</script>
